<template>
  <div class="collection">
      <div class="content">
          <div class="list" v-for="(item,index) in list" :key="index">
              <image :src="item.img" alt=""/>
              <div class="list_r">
                  <div class="title">{{item.title}}</div>
                  <div class="price">¥{{item.price}}</div>
              </div>
          </div>
      </div>
      
  </div>
</template>

<script>

export default {
  data () {
    return {
      list:[
        {img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔童春装2019新款品牌童装小女',price:'11.80'},
        {img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔童装女童套装儿童春装2019新款品牌童装',price:'11.80'},
        {img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔童装女童套装儿童春装2019新款品牌童装',price:'11.80'},
        {img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔',price:'11.80'},
        {img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔',price:'11.80'},
        {img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔',price:'11.80'}
      ]
    }
  },
  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped lang="less">
    .collection{
      width: 100%;
      height: 100%;
      background: #f5f5f5;
      position: absolute; 
      .content{
        width: 100%;
        padding: 0 24rpx;
        box-sizing: border-box;
        color: #333;
        font-size: 28rpx;
        .list{
            width: 100%;
            height: 228rpx;
            margin-top: 20rpx;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 22rpx 0 16rpx;
            box-sizing: border-box;
            image{
              width: 188rpx;
              height: 188rpx;
            }
            .list_r{
              width: 436rpx;
              height: 188rpx;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .title{
                overflow:hidden;
                text-overflow: ellipsis;//显示省略号
                display:-webkit-box;
                -webkit-line-clamp:2;//块元素显示的文本行数
                -webkit-box-orient:vertical;
              }
              .price{
                font-size: 32rpx;
              }
            }
          }
      }
      
    }
 
</style>
